<template>
  <div class="private-container">
    <div class="private-header"></div>
    <div class="private-content">
      <div
        v-for="(item, index) in menus"
        :key="item.key"
        @click="onClick(item, index + 1)"
        :class="`private-content-item ${
          activeItemIndex === index + 1 ? 'private-content-item-bg' : ''
        }`"
      >
        <div class="left">
          <span>{{ item.title }}</span>
          <input
            v-if="item.copyUrl"
            class="private-copy-input"
            type="text"
            :id="'copy-txt-' + item.key"
            :value="item.copyUrl"
          />
        </div>
        <div v-if="item.isShowArrowIcon" class="right">
          <img :src="arrowSvg" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { METAFLEXIBLE } from "./meta-flexible";
import arrowSvg from "@/assets/arrow.svg";
import {menuLists} from './constant'
export default {
  name: "PrivateVW",
  components: {},
  data() {
    return {
      arrowSvg,
      currDeepPath: 1,
      menus: [],
      activeItemIndex: -1,
    };
  },
  async created() {
    METAFLEXIBLE({
      namespace: "meta-flexible",
      designViewpoint: 750,
      plans: [2],
    });
    const params = this.$route.params || {};
    if (params.deepId && params.parentId) {
      const list = menuLists.filter(
        (item) =>
          item.deepPath === parseInt(params.deepId) &&
          item.parent === parseInt(params.parentId)
      );
      this.menus = list;
      const parent = menuLists.find(
        (item) => item.key === parseInt(params.parentId)
      );
      if (parent) {
        if (parent.title === "我要举报") {
          document.title = parent.title.replace("我要", "");
        } else {
          document.title = parent.title;
        }
      }
    } else {
      const list = menuLists.filter(
        (item) => item.deepPath === this.currDeepPath
      );
      this.menus = list;
      document.title = "关于";
    }
  },
  mounted() {},
  methods: {
    onClick(value, index) {
      this.activeItemIndex = index;
      const origin = window.location.origin;
      const timeid = setTimeout(() => {
        // 使用JS处理背景色主要解决在弹toast情况下使用伪类active 不生效问题，时间原因暂未查到原因
        this.activeItemIndex = -1;
        clearTimeout(timeid);
      }, 200);
      if (value.path) {
        window.open=value.path
      } else {
        const lit = menuLists.filter((item) => item.parent === value.key);
        if (lit.length) {
          const url = `${origin}/private/m/${lit[0].deepPath}/${value.key}`;
          // window.wx.miniProgram.navigateTo({
          //   url: `/pages/webview/index?url=${encodeURIComponent(url)}`,
          // });
          window.location.href=url
        } else if (value.copyUrl) {
          this.copyTXT(value.key, {
            success: () => {
              this.$toast({
                message:
                  '<p style="padding-bottom:4px">链接已复制</p><p>请到浏览器访问</p>',
              });
            },
            fail: () => {
              this.$toast({
                message:
                  '<p style="padding-bottom:4px">链接复制错误</p><p>请稍后重试</p>',
              });
            },
          });
        }
      }
    },
    copyTXT(key, options) {
      options = options || {};
      let copyDOM = document.getElementById(`copy-txt-${key}`); //指定的DOM元素
      let range = document.createRange(); // 创建容器
      range.selectNode(copyDOM); // 选中需要复制的节点
      const selection = window.getSelection();
      if (selection.rangeCount > 0) selection.removeAllRanges();
      selection.addRange(range); // 执行选中元素
      copyDOM.select();
      let successful = document.execCommand("copy"); // 执行 copy 操作
      copyDOM.blur();
      try {
        if (successful) {
          options.success && options.success();
        } else {
          options.fail && options.fail();
        }
      } catch (err) {
        options.fail && options.fail();
      }
      window.getSelection().removeAllRanges(); // 移除选中的元素
    },
  },
};
</script>

<style lang="scss" scoped>
.private-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.private-content {
  display: flex;
  min-height: 6.93rem;
  flex: 1;
  width: 100%;
  background: #ffffff;
  flex-direction: column;
}
.private-content-item {
  box-shadow: inset 0px -1px 1px -1px #c8c7cc;
  width: 100%;
  height: 1.5rem;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .left {
    margin-left: 0.43rem;
    width: 5.573rem;
    line-height: 1rem;
  }
  .right {
    text-align: right;
    margin-right: 0.42rem;
    line-height: 1.5rem;
    img {
      width: 0.32rem;
      height: 0.64rem;
      margin-top: 0.43rem;
    }
  }
  span {
    line-height: 1.5rem;
    font-size: 0.42rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #111317;
  }
}
.private-header {
  width: 100%;
  height: 0.213rem;
  background: #f5f5f5;
}
.private-copy-input {
  position: absolute;
  left: -1000px;
  z-index: -1000;
}
.private-content-item-bg {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.05);
}
</style>
<style lang="scss">
body,
p {
  margin: 0;
  padding: 0;
}
#app {
  height: 100vh;
}
</style>
